<template>
  <el-button type="text" @click="handleLogout" class="logout-button">
    <el-icon><SwitchButton /></el-icon>
    退出登录
  </el-button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}
</script>

<style scoped>
.logout-button {
  color: white;
  font-weight: 500;
}

.logout-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
</style> 